<template>
  <view>
    <u-modal
      :show="show"
      width="625rpx"
      @confirm="confirm"
      @cancel="cancel"
      @close="close()"
      :content="content"
      cancelColor="#000"
      confirmColor="#6678A0"
      showCancelButton="true"
      closeOnClickOverlay="true"
    >
      <view class="slot-content">
        <view class="title">取消订单</view>
        <view class="content">
          <text>售卖火爆</text>
          <image class="fire" src="../../../static/fire.png"></image>
        </view>
        <view class="content">取消订单可能无法再购买!</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import api from '@/request/api.js'
export default {
  data() {
    return {
      show: false,
      content: '取消关注成功',
      orderId: this.order_id,
    }
  },
  props: ['order_id'],
  methods: {
    open(order_id) {
      this.show = true
      this.orderId = order_id
    },
    close() {
      this.show = false
      this.$emit('stop')
    },
    confirm() {
      api
        .cancelPay({
          order_id: this.orderId,
        })
        .then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$emit('handleChange', 'Jack')
            this.show = false
            this.$emit('stop')
            uni.showToast({
              title: res.message,
              icon: 'success',
            })
          }
        })
    },
    cancel() {
      this.show = false
      this.$emit('stop')
    },
  },
}
</script>

<style lang="scss">
.slot-content {
  .title {
    text-align: center;
    color: #000;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
  .content {
    text-align: center;
    color: rgb(78, 78, 78);
    font-size: 28rpx;
  }
  .fire {
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    margin: 0 10rpx;
  }
}

/deep/.u-modal {
  border-radius: 20rpx !important;
}
/deep/.u-line {
  opacity: 0.5;
}
/deep/.u-modal__button-group__wrapper {
  font-weight: bold;
}
.u-modal__title {
  color: #000;
}
</style>
